<template>
  <div class="tabbar">
    <div
      v-for="(item, idx) in itemList"
      :key="item.itemMark"
      class="itemWrap"
      :class="{ active: selected === item.itemMark, middle: idx === realMiddleIndex }"
      @click="getval(item.itemMark)"
    >
      <div v-if="idx === realMiddleIndex && realMiddleIndex !== -1" class="middle-btn">
        <span class="middle-btn-arc"></span>
        <van-badge :content="item.badge" v-if="item.badge !== undefined && item.badge !== null">
          <van-icon :name="item.icon" class="middle-icon" :class="{ selected: selected === item.itemMark }" />
        </van-badge>
        <van-icon v-else :name="item.icon" class="middle-icon" :class="{ selected: selected === item.itemMark }" />
      </div>
      <template v-else>
        <div class="icon-wrap" :class="{ active: selected === item.itemMark, selected: selected === item.itemMark }">
          <van-badge :content="item.badge" v-if="item.badge !== undefined && item.badge !== null">
            <van-icon :name="item.icon" />
          </van-badge>
          <van-icon v-else :name="item.icon" />
        </div>
        <span 
          class="tab-txt"
          :class="{ 'fade-out': selected === item.itemMark }"
        >{{ item.itemTxt }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { Icon, Badge } from 'vant';
export default {
  components: {
    'van-icon': Icon,
    'van-badge': Badge,
  },
  data() {
    return {
      selected: this.$route.path.substr(1),
      itemList: [
        {
          itemTxt: "任务",
          itemMark: "task",
          icon: "todo-list-o",
          badge: 5,
        },
        {
          itemTxt: "消息",
          itemMark: "message",
          icon: "chat-o",
          badge: '99+',
        },
        {
          itemTxt: "首页",
          itemMark: "home",
          icon: "apps-o",
        },
        {
          itemTxt: "通讯录",
          itemMark: "contacts",
          icon: "friends-o",
        },
        {
          itemTxt: "我的",
          itemMark: "my",
          icon: "user-o",
        },
      ],
    };
  },
  computed: {
    realMiddleIndex() {
      // 菜单数为奇数时，取中间；偶数时不悬浮
      return this.itemList.length % 2 === 1 ? Math.floor(this.itemList.length / 2) : -1;
    }
  },
  methods: {
    getval(val) {
      this.selected = val;
      this.$router.push("/" + this.selected);
    },
  },
};
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -2px 16px 0 rgba(22, 119, 255, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  z-index: 1000;
}

.itemWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 70px;
}

.icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: background 0.2s;
}
.icon-wrap.active {
  background: #1677ff;
}
.icon-wrap.active .van-icon {
  color: #fff !important;
}
.icon-wrap .van-icon {
  font-size: 24px;
  color: #b2b2b2;
  transition: color 0.2s, transform 0.3s cubic-bezier(0.4,2,0.6,1);
}

.tab-txt {
  font-size: 13px;
  color: #b2b2b2;
  margin-top: -2px;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.4,2,0.6,1);
  opacity: 1;
  display: block;
  margin-bottom: 5px;
}
.itemWrap.active .tab-txt {
  color: #1677ff;
  font-weight: bold;
}
.tab-txt.fade-out {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.middle-btn {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: #222;
  border-radius: 50%;
  box-shadow: 0 6px 18px 0 rgba(22, 119, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 4px solid #fff;
}
/* .middle-btn-arc {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 24px;
  background: #fff;
  border-bottom-left-radius: 24px 12px;
  border-bottom-right-radius: 24px 12px;
  z-index: 1;
  display: block;
} */
.middle-icon {
  font-size: 32px !important;
  color: #fff !important;
  z-index: 2;
}

.icon-wrap.selected .van-icon {
  transform: scale(1.25);
  transition: transform 0.3s cubic-bezier(0.4,2,0.6,1);
}
.middle-icon.selected {
  transform: scale(1.25);
  transition: transform 0.3s cubic-bezier(0.4,2,0.6,1);
}
</style>
